<template>
  <view class="canclePop">
    <u-popup :show="Show" :round="10" mode="bottom" close="close">
      <view class="title">
        订单取消
        <!--#ifdef MP-ALIPAY-->
        <image src="../static/image/close.png" @click="close"></image>
        <!--#endif-->
        <!--#ifdef MP-WEIXIN-->
        <image src="../../static/shopIcon/close.png" @click="close"></image>
        <!--#endif-->
      </view>
      <view class="content">
        <view class="tips">请选择取消原因，取消订单后将无法恢复。</view>
        <view v-for="(item, index) in choiceList" :key="index" class="radioSome" @click="choice(item)">
          <view :class="item.id == id ? 'radioDefault radioAcitve' : 'radioDefault'">
            <u-icon  v-if="item.id == id" name="checkmark" color="#FFFFFF" size="10" />
          </view>
          {{item.name}}
        </view>
        <view class="Bottom">
          <view class="default" @click="close">取消</view>
          <view @click="cancelCom">确认</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  props: {
    cancleShow: {
      type: Boolean,
      default: true
    },
    cancleParams: {
      type: Object,
      default: null
    },
    isAfterSales:{
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      id: '',
      Show: this.cancleShow,
      choiceList:[]
    }
  },
  computed: {
    params() {
      return this.cancleParams
    }
  },
  watch: {
    cancleShow(newVal, oldVal) {
      if (newVal != oldVal) {
        this.Show = newVal
        console.log(this.isAfterSales)
      if(!this.isAfterSales){
        this.choiceList = [
          { name: '订购错误/计划有变', id: 10 },
          { name: '价格高', id: 11 },
          { name: '无法满足到货时效', id: 12 },
          { name: '支付问题', id: 13 },
          { name: '重复下单', id: 14 },
          { name: '暂时不要了', id: 15 },
          { name: '订单信息有误', id: 16 },
          { name: '商品缺货/无货', id: 17 },
          { name: '商品质量问题', id: 19 },
          { name: '价格错误', id: 20 },
          { name: '其他', id: 18 },
        ]
    }else{
       this.choiceList = [
        { name: '订购错误/计划有变', id: 51 },
        { name: '价格高', id: 52 },
        { name: '无法满足到货时效', id: 53 },
        { name: '支付问题', id: 54 },
        { name: '重复下单', id: 55 },
        { name: '暂时不要了', id: 56 },
        { name: '订单信息有误', id: 57 },
        { name: '商品缺货/无货', id: 58 },
        { name: '商品质量问题', id: 61 },
        { name: '价格错误', id: 62 },
        { name: '其他', id: 59 },
      ]
    }
      }
    }
  },
  methods: {
    close() {
      this.$emit('update:cancleShow', false)
    },
    cancelCom() {
      if (!this.id) return this.$u.toast('请选择原因')
      if(this.isAfterSales){
          this.params.customer_refund_reason =this.id
      }else{
          this.params.cancle_reason = this.id
      }
      this.$emit('update:cancleParams', this.params)
      this.$emit('cancelCom')
      this.id = ''
    },
    choice(e) {
      this.id = e.id
    }
  }
}

</script>

<style scoped lang="scss">
.canclePop {
  .title {
    width: 100%;
    height: 88rpx;
    padding: 0rpx 32rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    color: #222222;
    font-size: 28rpx;
    font-weight: 700;
    border-bottom: 1rpx solid #F5F5F5;
    image {
      height: 48rpx;
      width: 48rpx;
    }
  }
  .content{
    padding: 16rpx 32rpx;
    box-sizing: border-box;
    .tips {
      color: #808080;
      font-size: 28rpx;
      font-weight: 400;
      padding: 16rpx 0rpx 32rpx 0rpx;
    }
    .radioDefault {
      flex-shrink: 0;
      width: 32rpx;
      height: 32rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      align-content: center;
      border-radius: 50%;
      border: 1rpx solid #D3D3D3;
      margin-right: 16rpx;
    }
    .radioAcitve {
      background: #FF5533;
      border: 1rpx solid #FF5533;
    }
    .radioSome {
      display: flex;
      justify-content: flex-start;
      align-content: center;
      align-items: center;
      margin-bottom: 24rpx;
    }
  }
  .Bottom {
    padding: 16rpx;
    display: flex;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    margin-top: 30rpx;
    margin-bottom: 68rpx;
    view {
      color: #FFFFFF;
      font-size: 28rpx;
      font-weight: 400;
      display: flex;
      justify-content: center;
      align-items: center;
      align-content: center;
      border-radius: 8rpx;
      width: 314rpx;
      height: 64rpx;
      background: #FF5533;
      border: 1rpx solid #FF5533;
    }
    .default {
      background: #FFFFFF !important;
      color: #333333 !important;
      border: 1rpx solid #DEDEDE !important;
    }
  }
}
</style>